<script setup lang="ts">
// vue
import { ref } from "vue";
// primevue
import { Button } from "primevue";
// my components
import MDEditor from "./components/MDEditor.vue";

const isModalShown = ref(false);
</script>

<template>
  <div class="bruh-wrapper">
    <Button pill variant="primary" size="lg" @click="isModalShown = true;">
      <i class="bi bi-file-earmark-text"></i>
    </Button>
  </div>
  <MDEditor v-model="isModalShown"></MDEditor>
</template>

<style scoped>
.bruh-wrapper {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}
</style>
